<template>
	<!-- 滚动区域 -->
	<view class="case" scroll-y @scrolltolower="scrolltolower">
		<view v-if="doneList && doneList.length > 0" class="case_list">
			<view v-for="(item, index) in doneList" :key="index" class="case_content" @click="showDetail(item)">
				<view class="case_content_headview">
					<view class="case_content_headview_head">
						{{item.acceptcode}}
					</view>
					<view class="case_content_headview_doneImg">
						<span>已受理</span>
					</view>
				</view>
				<view class="case_content_info">
					<view class="case_content_info_column">
						<view class="case_content_info_column_title">
							业务名称：
						</view>
						<view class="case_content_info_column_content">
							{{item.process}}
						</view>
					</view>
					<view class="case_content_info_column">
						<view class="case_content_info_column_title">
							环节：
						</view>
						<view class="case_content_info_column_content">
							{{item.name}}
						</view>
					</view>
					<view class="case_content_info_column">
						<view class="case_content_info_column_title">
							申请人：
						</view>
						<view class="case_content_info_column_content">
							{{ item.applyname }}
						</view>
					</view>
					<view class="case_content_info_column">
						<view class="case_content_info_column_title">
							被申请人：
						</view>
						<view class="case_content_info_column_content">
							{{ item.targetname_bs != null ? item.targetname_bs : item.targetname_bz }}
						</view>
					</view>
					<view class="case_content_info_column">
						<view class="case_content_info_column_title">
							来源：
						</view>
						<view class="case_content_info_column_content">
							{{Tp_applysourceMap[item.source]}}
						</view>
					</view>
					<view class="case_content_info_column">
						<view class="case_content_info_column_title">
							申请日期：
						</view>
						<view class="case_content_info_column_content">
							{{transTime(item.applycreatetime)}}
							<span style="margin-left: 8rpx;">截止</span>
							<span v-if="getLeftDay(item.quedate_bs) <= 3&&getLeftDay(item.quedate_bs) >0"
								style="margin-left: 10rpx;color: red;">剩余{{Math.ceil(getLeftDay(item.quedate_bs))}}天</span>
							<span v-else-if="getLeftDay(item.quedate_bs) >= 5"
								style="margin-left: 10rpx;color: darkgreen;">剩余{{Math.abs(Math.floor(getLeftDay(item.quedate_bs)))}}天</span>
							<span v-else-if=" getLeftDay(item.quedate_bs) <= 0&&getLeftDay(item.quedate_bs)>=-1"
								style="margin-left: 10rpx;color: red;">已到期</span>
							<span v-else-if=" getLeftDay(item.quedate_bs) <0"
								style="margin-left: 10rpx;color: red;">延期{{Math.abs(Math.floor(getLeftDay(item.quedate_bs)))}}天</span>
						</view>
					</view>
					<view class="case_content_info_column">
						<view class="case_content_info_column_title">
							期满日期：
						</view>
						<view class="case_content_info_column_content">
							{{item.quedate_bs}}
						</view>
					</view>
				</view>
			</view>
			<u-loadmore class="case_loadmore" :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
		<view v-else class="case_empty">
			<u-empty mode="data" :text="emptyText"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		Tp_applysourceMap
	} from "@/common/enumeration/Tp_applysource.js"
	import moment from 'moment'
	export default {
		props: {
			doneList: {
				type: Array,
				default: () => {
					return []
				},
				required: true
			},
			emptyText: {
				type: String,
				default: "暂无数据"
			},
		},
		data() {
			return {
				status: 'loadmore', //当前状态
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				Tp_applysourceMap: Tp_applysourceMap,
			};

		},
		methods: {
			showDetail(data) {
				this.$emit('showDetail', data) //(父组件中触发的事件名，要传的变量名)
			},
			transTime(val) {
				return val ? moment(val).format('YYYY年M月D日') : ''
			},
			getLeftDay(val) {
				return val ? moment(val, 'YYYY-MM-DD').diff(moment(new Date(), 'YYYY-MM-DD'), 'days', true) : ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.case {
		overflow: auto;
		width: calc(100% - 2rem);
		margin: auto;

		&_list {
			box-sizing: border-box;
			margin: 30rpx 0 160rpx 0;
		}

		&_content:last-child {
			margin-bottom: 0;
		}

		&_content {
			box-sizing: border-box;
			width: 100%;
			background: #FFFFFF;
			box-shadow: 3px 4px 21px 0px #F5F5F5;
			border-radius: 10px;
			padding: 30rpx;
			position: relative;
			margin-bottom: 30rpx;

			&_headview {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: row;

				&_head {
					font-size: 1rem;
					font-weight: 550;
					color: #000000;
				}

				&_toDoImg {
					background: linear-gradient(90deg, #FFD97A 0%, #FF9F00 54%, #D97E00 100%);
					border-radius: 0rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 0.8rem;
					font-weight: bold;
					color: #FFFFFF;
					position: absolute;
					right: 0;
					top: 0;
					padding: 10rpx 30rpx;
				}

				&_doneImg {
					background: linear-gradient(90deg, #6ADE93 0%, #00B853 54%, #009146 100%);
					border-radius: 0px 10px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 0.8rem;
					font-weight: bold;
					color: #FFFFFF;
					position: absolute;
					right: 0;
					top: 0;
					padding: 10rpx 30rpx;
				}
			}


			&_info {
				background: #fafafa;
				border-radius: 10px;
				margin-top: 30rpx;
				padding: 20rpx;

				&_column {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					flex-direction: row;
					padding: 0px 15px;

					&_title {
						width: 5rem;
						height: 1.6rem;
						font-size: 0.8rem;
						font-weight: 500;
						color: #000000;
						opacity: 0.65;
						text-align: justify;
						text-align-last: justify;
					}

					&_content {
						width: 14rem;
						height: 1.6rem;
						font-size: 0.8rem;
						font-weight: 550;
						color: #1F1F1F;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}

		&_loadmore {}

		&_empty {
			margin-top: 10rem;
		}

	}

	/deep/ .uni-page-wrapper {
		background-color: #F5F5F5;
	}
</style>